<template>
  <div class="courselist" v-loading="loading">
    <div class="goBack" @click="goBack(undefined, '1')">
      <img src="../../../assets/images/goBack.png" alt="" />返回
    </div>
    <div class="courselistMain">
      <div class="courselistTop">
        <img :src="getImg(lesson.picture)" alt="" />
        <div class="courselistTop_r">
          <div class="title">{{ lesson.title }}</div>
          <div class="label_cnt">
            <div>课程介绍：</div>
            <div>
              {{ lesson.intro }}
            </div>
          </div>
          <!-- <div class="label_cnt" style="margin-top: 16px">
            <div>课程时长：</div>
            <div>1小时7分52秒</div>
          </div>
          <div class="credits">学习完成可获得10学分</div>
          <el-button type="primary" @click="handleVideo">继续学习</el-button> -->
        </div>
      </div>
      <div class="courselistCnt">
        <el-tabs v-model="activeName">
          <el-tab-pane label="课件列表" name="1"></el-tab-pane>
        </el-tabs>
        <div class="list">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
              <img
                src="../../../assets/images/video.png"
                alt=""
                v-if="item.type === '视频'"
              />
              <span class="imgPdf" v-else>PDF</span>
              <div>
                <div>{{ item.title }}</div>
                <div>
                  <span style="margin-right: 10px" v-if="item.type === '视频'"
                    ><span>时长：</span>{{ convertSecondsToHMS(item.length) }}
                  </span>
                  <span style="margin-right: 10px" v-else
                    ><span>页数：</span>{{ item.length }}页
                  </span>
                  <el-progress
                    :percentage="getProgress(item)"
                    v-if="item.type === '视频'"
                  ></el-progress>
                  <span style="margin-left: -40px" v-if="item.type === '视频'">
                    <span>进度：</span> {{ getProgress(item) + " %" }}
                  </span>
                  <span v-if="item.type === 'PDF'">{{
                    item.status === "0"
                      ? "未开始"
                      : item.status === "1"
                      ? "学习中"
                      : "已完成"
                  }}</span>
                </div>
              </div>
            </div>
            <div
              class="right"
              @click="handleVideo(item)"
              v-if="!isCourseCenter"
            >
              {{ item.status === "0"? "开始学习" : item.status === "1" ? '继续学习' : '已完成'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { coursewareList } from "@/api/trainingCenter";
export default {
  props: {
    goBack: {
      type: Function,
      default: () => {},
    },
    planId: {
      type: String,
      default: "",
    },
    courseId: {
      type: String,
      default: "",
    },
    lesson: {
      type: Object,
      default: () => {},
    },
    isCourseCenter: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["setVideo"],
  data() {
    return {
      activeName: "1",
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await coursewareList({
        planId: this.planId,
        courseId: this.courseId,
      });
      this.list = res.data;
      this.loading = false;
      return this.list;
    },
    handleVideo(item) {
      // if(item.status === '2') return 
      this.setVideo(true, {
        currentData: item,
        getList: this.getList,
      });
    },
    getImg(data) {
      let img = undefined;
      if (!!data) {
        img = JSON.parse(data);
      }
      if (img?.length) {
        return img[0].url;
      }
      return require("../../../assets/images/banner1.png");
    },
    convertSecondsToHMS(seconds) {
      if (!isNaN(Number(seconds))) {
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var remainingSeconds = seconds % 60;

        return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
      }
      return 0 + "小时 " + 0 + "分钟 " + 0 + "秒";
    },
    getProgress(row) {
      if (!isNaN(Number(row.length)) && !isNaN(Number(row.studyTime))) {
        return Number(
          ((Number(row.studyTime) / Number(row.length)) * 100).toFixed()
        );
      }
      return 0;
    },
    format(row) {
      if (!isNaN(Number(row.length)) && !isNaN(Number(row.studyTime))) {
        return (
          Number((Number(row.studyTime) / Number(row.length)).toFixed()) * 100
        );
      }
      return 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.courselist {
  background: #f4f4f4;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: Microsoft YaHei;
  font-weight: 400;
  .goBack {
    width: 1198px;
    font-size: 14px;
    color: #8b8b8b;
    margin: 15px 0;
    cursor: pointer;
    img {
      width: 17px;
      height: 15px;
      margin-right: 6px;
    }
  }
  .courselistMain {
    width: 1198px;
    min-height: 80vh;
    // overflow-y: auto;
    .courselistTop {
      background: #fff;
      display: flex;
      padding: 16px;
      border-radius: 10px;
      margin-bottom: 20px;
      img {
        height: 290px;
        width: 40%;
        border-radius: 10px;
        margin-right: 40px;
      }
      .courselistTop_r {
        .title {
          font-size: 22px;
          color: #000000;
          margin: 15px 0;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .label_cnt {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666666;
          line-height: 23px;
          align-items: flex-start;
          div:nth-of-type(1) {
            width: 70px;
            flex: none;
          }
        }
        .credits {
          margin-top: 8px;
          font-size: 14px;
          color: #ee8f13;
          line-height: 14px;
        }
        ::v-deep .el-button--primary {
          background: #2f54eb;
          border: none;
          width: 180px;
          margin-top: 25px;
        }
      }
    }
    .courselistCnt {
      background: #fff;
      padding: 15px;
      border-radius: 10px;
      .list {
        .item {
          background: #f8f8f8;
          border-radius: 10px;
          display: flex;
          cursor: pointer;
          justify-content: space-between;
          align-items: center;
          padding: 12px 40px 12px 20px;
          margin-bottom: 12px;
          &:hover {
            background: #f6f8ff;
          }
          .left {
            display: flex;
            align-items: center;
            .imgPdf {
              display: inline-block;
              width: 34px;
              height: 34px;
              background: #ff4d4f;
              text-align: center;
              line-height: 34px;
              color: #fff;
              font-size: 15px;
              border-radius: 10px;
              margin-right: 12px;
            }
            img {
              margin-right: 12px;
            }
            & > div div:nth-of-type(1) {
              font-size: 16px;
              color: #000000;
            }
            & > div div:nth-of-type(2) {
              margin-top: 15px;
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #666666;
              ::v-deep .el-progress--line {
                width: 200px;
              }
              ::v-deep .el-progress-bar__inner {
                background: #2f54eb;
              }
              ::v-deep .el-progress__text {
                display: none;
              }
            }
          }
          .right {
            font-size: 14px;
            color: #2f54eb;
          }
        }
      }
    }
  }
}
</style>